<template>
  <el-row class='page-product'>
    <el-col :span="19">
      <e-crumb :keysword='keysword'></e-crumb>
      <category :classification='classification'
                :areas='areas' />
      <list :list='list' />
    </el-col>
    <el-col :span="5"
            ref='mapBox'>
      <!-- 地图 -->
      <a-map :width='mapSize'
             :height='mapSize + 100' 
             :markerList='markerList'
             :fixed='mapFixed' ref='map' ></a-map>
    </el-col>
  </el-row>

</template>
 
<script lang='ts'>
import { Component, Vue } from "vue-property-decorator";
import ECrumb from "@/components/products/crumb.vue";
import Category from "@/components/products/categroy.vue";
import List from "@/components/products/list.vue";
import AMap from "@/components/public/map.vue";
@Component({
  async asyncData({ params, $axios, store}) {
    // search/resultsByKeywords
    const {
      status,
      data: { count, pois }
    } = await $axios.get("/search/resultsByKeywords", {
      params: {
        keyword: params.key,
        city: store.state.geo.city || ''
      }
    });
    const {
      status: status2,
      data: { types, areas }
    } = await $axios.get("/category/crumbs");
    if (status === 200 && status2 === 200) {
      return {
        markerList: pois.filter(item=>item.photos.length).map(item => {
          return {
            name: item.name,
            location: item.location.split(',') || [item.longtide, item.latitude],
            add: item.add || ''
          };
        }),
        keysword: params.key,
        areas: areas.slice(0, 5),
        classification: types.slice(0, 5),
        list: pois.filter(item=>item.photos.length).map(item => {
          return {
            id: item._id,
            type: item.type,
            img: item.img || item.photos[0].url,
            name: item.name,
            comment: Math.floor(Math.random() * 1000),
            rate: Math.floor(Math.random() * 5),
            price: Math.floor(Math.random() * 1000),
            tel: item.tel,
            location: item.location || {
              longitude: item.longtide,
              latitude: item.latitude
            },
            add: item.add,
            module: item.module || ''
          };
        })
      };
    }
  },
  fetch({ params, store }) {
    store.dispatch("search/setName", params.key);
  },

  components: {
    ECrumb,
    Category,
    List,
    AMap
  }
})
export default class extends Vue {
  keysword: string = "";
  classification: any[] = [];
  areas: any[] = [];
  list: any[] = [];
  mapSize: number = 0;
  mapTop: number = 0;
  mapFixed: boolean = false
  beforeMount() {
    window.removeEventListener("scroll", this.handleScroll); // 监听（绑定）滚轮滚动事件
  }
  mounted() {
    this.initMap();
    console.log(this.$refs.map["$el"].getBoundingClientRect());
    this.mapTop = this.$refs.map["$el"].getBoundingClientRect().top
    window.addEventListener("scroll", this.handleScroll, true); // 监听（绑定）滚轮滚动事件
  }
  initMap() {
    let width = this.$refs.mapBox["$el"].clientWidth;
    this.mapSize = width - 20;
  }
  handleScroll(e) {
    // console.log();
    // 滚动距离
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    console.log(scrollTop);
    if(scrollTop > this.mapTop) {
      this.mapFixed = true
    }else {
      this.mapFixed = false
    }
  }
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll); // 监听（绑定）滚轮滚动事件
  }
}
</script>
<style lang='scss'>
@import "@/assets/css/products/index.scss";
.mapFixed {
  position: fixed;
}
</style>